<template>
  <frame-view :class="$theme==='one'?'index':'indexTwo'"  showTabbar>
    <p class="title" style="margin-left: 8px">产品名称</p>
<!--    {{env}}-->
    <div class="type">
      <div style="width: 35vw;margin-top: 40px">
        <van-tabs  background=" rgba(0,0,0,0)" title-inactive-color="#fff" title-active-color="#fff" color="#fff"
                  v-model="activeName">
          <van-tab title="小盒子" name="a"></van-tab>
          <van-tab title="X86" name="b"></van-tab>
        </van-tabs>

      </div>
      <p style="display: flex;align-items: center;color: #fff">
        <img src="./image/add.png" style="width: 36px;height: 36px" alt="图片" />
        <span style="margin-left: 2px">添加节点</span>
      </p>

    </div>
    <van-search shape="round" placeholder="请输入设备名称" style="margin-top: 20px" />
    <div class="typeTop" style="margin-top: 24px;padding: 33px 20px 0 20px;background-color: #f7f7f7;border-radius: 20px">
      <van-tabs :line-width="50" background=" rgba(0,0,0,0)" title-inactive-color="#191919" title-active-color="#191919"
                :color="$theme==='one'?'rgb(15,106,250,.8)':'rgba(27, 154, 137,.8)'"
                v-model="activeName2">
        <van-tab title="全部(42)" name="a"></van-tab>
        <van-tab title="在线(33)" name="b"></van-tab>
        <van-tab title="离线(9)" name="c"></van-tab>
        <van-tab title="待安装(0)" name="d"></van-tab>
      </van-tabs>
      <van-dropdown-menu active-color="#222222" v-if="!showEmpty">
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item :title="value2">
          <div>
          <van-search :clearable="false" shape="round" v-model="addValue"
                      placeholder="请输入分组名称"
                      style="width: 646px;height: 68px;margin-left: 32px;font-size: 26px;margin-top: 25px" />

          <p style="padding: 20px 32px;color: #5D5D5D;margin-top: 32px">名称</p>
          <p style="padding: 20px 32px;color: #5D5D5D;margin-top: 32px">名称</p>
          <p style="padding: 20px 32px;color: #5D5D5D;margin-top: 32px">名称</p>
          <p style="padding: 20px 32px;color: #5D5D5D;margin-top: 32px">名称</p>
          <p style="padding: 20px 32px;color: #5D5D5D;margin-top: 32px">名称</p>
          <p style="padding: 20px 32px;color: #5D5D5D;margin-top: 32px">名称</p>
          <p style="padding: 20px 32px;color: #5D5D5D;margin-top: 32px">名称</p>
          <p style="padding: 20px 32px;color: #5D5D5D;margin-top: 32px">名称</p>
          <p style="padding: 20px 32px;color: #5D5D5D;margin-top: 32px">名称</p>
          <p style="padding: 20px 32px;color: #5D5D5D;margin-top: 32px">名称</p>
          <p style="padding: 20px 32px;color: #5D5D5D;margin-top: 32px">名称</p>
          <p style="padding: 20px 32px;color: #5D5D5D;margin-top: 32px">名称</p>
          <p style="padding: 20px 32px;color: #5D5D5D;margin-top: 32px">名称</p>
          <p style="padding: 20px 32px;color: #5D5D5D;margin-top: 32px">名称</p>
          <p style="padding: 20px 32px;color: #5D5D5D;margin-top: 32px">名称</p>
          <p style="padding: 20px 32px;color: #5D5D5D;margin-top: 32px">名称</p>

          </div>


        </van-dropdown-item>
        <van-dropdown-item v-model="value3" :options="option3">
          <div class="addGroup">
            <div style="display: flex;align-items: center">
              <p style="font-size: 28px;color: #5D5D5D;">添加分组</p>
              <van-search :clearable="false" left-icon="none" shape="round" v-model="addValue"
                          placeholder="请输入分组名称"
                          style="width: 276px;height: 72px;margin-left: 10px;font-size: 26px;" />
            </div>
            <p style="color: var(--primary-color);font-size: 28px;" @click="goPage('/equipment/admin')"
            >管理分组</p>
          </div>
        </van-dropdown-item>
        <van-dropdown-item v-model="value4" :options="option4" />
      </van-dropdown-menu>
      <div v-if="!showEmpty">

      <div style="margin-top: 16px" @click="goPage('/equipment/node')">
        <div
          style="padding: 24px 28px 24px 24px;background: linear-gradient( 151deg,  rgba(208, 242, 255, 0.28) 0%, rgba(107, 197, 255, 0.28) 100%);">
          <div
            style="display: flex;justify-content: space-between;align-items: center">
            <div>
              <p style="color: #999999;font-size: 24px;">32_wkz_b40e48f5c2974582-psn</p>
              <p style="margin-top: 24px">测(?)
                <span class="status">在线</span>
                <span class="status nati">NATI</span>
              </p>
            </div>
            <p style="font-size: 40px;color: #333333;">
              <span style="font-size: 28px;">￥</span>407.19</p>

          </div>

        </div>
        <div style="padding: 24px;font-size: 28px;color: #000;background-color: #fff">
          <p style="display: flex;justify-content: space-between">
            <span style="color: #ababab">贡献宽带</span>
            <span>42.53M</span>
          </p>
          <p style="margin-top: 20px;display: flex;justify-content: space-between">
            <span style="color: #ababab">压测</span>
            <span>34 mbps</span>
          </p>
          <p style="margin-top: 20px;display: flex;justify-content: space-between">
            <span style="color: #ababab">最后结算日期</span>
            <span>2023年12月26日</span>
          </p>
          <p style="margin-top: 20px;display: flex;justify-content: space-between">
            <span style="color: #ababab">运营商</span>
            <span>电信 | 贵州省贵阳市</span>
          </p>

        </div>
      </div>
      <div style="margin-top: 16px">
        <div
          style="padding: 24px 28px 24px 24px;background: linear-gradient( 151deg,  rgba(208, 242, 255, 0.28) 0%, rgba(107, 197, 255, 0.28) 100%);">
          <div
            style="display: flex;justify-content: space-between;align-items: center">
            <div>
              <p style="color: #999999;font-size: 24px;">32_wkz_b40e48f5c2974582-psn</p>
              <p style="margin-top: 24px">测(?)
                <span class="status leave">离线</span>
                <span class="status nati">NATI</span>
              </p>
            </div>
            <p style="font-size: 40px;color: #333333;">
              <span style="font-size: 28px;">￥</span>407.19</p>

          </div>

        </div>
        <div style="padding: 24px;font-size: 28px;color: #000;background-color: #fff">
          <p style="display: flex;justify-content: space-between">
            <span style="color: #ababab">贡献宽带</span>
            <span>42.53M</span>
          </p>
          <p style="margin-top: 20px;display: flex;justify-content: space-between">
            <span style="color: #ababab">压测</span>
            <span>34 mbps</span>
          </p>
          <p style="margin-top: 20px;display: flex;justify-content: space-between">
            <span style="color: #ababab">最后结算日期</span>
            <span>2023年12月26日</span>
          </p>
          <p style="margin-top: 20px;display: flex;justify-content: space-between">
            <span style="color: #ababab">运营商</span>
            <span>电信 | 贵州省贵阳市</span>
          </p>

        </div>
      </div>
      <div style="margin-top: 16px">
        <div
          style="padding: 24px 28px 24px 24px;background: linear-gradient( 151deg,  rgba(208, 242, 255, 0.28) 0%, rgba(107, 197, 255, 0.28) 100%);">
          <div
            style="display: flex;justify-content: space-between;align-items: center">
            <div>
              <p style="color: #999999;font-size: 24px;">32_wkz_b40e48f5c2974582-psn</p>
              <p style="margin-top: 24px">测(?)
                <span class="status await">待安装</span>
                <span class="status nati">NATI</span>

              </p>
            </div>
            <p style="font-size: 40px;color: #333333;">
              <span style="font-size: 28px;">￥</span>407.19</p>

          </div>

        </div>
        <div style="padding: 24px;font-size: 28px;color: #000;background-color: #fff">
          <p style="display: flex;justify-content: space-between">
            <span style="color: #ababab">贡献宽带</span>
            <span>42.53M</span>
          </p>
          <p style="margin-top: 20px;display: flex;justify-content: space-between">
            <span style="color: #ababab">压测</span>
            <span>34 mbps</span>
          </p>
          <p style="margin-top: 20px;display: flex;justify-content: space-between">
            <span style="color: #ababab">最后结算日期</span>
            <span>2023年12月26日</span>
          </p>
          <p style="margin-top: 20px;display: flex;justify-content: space-between">
            <span style="color: #ababab">运营商</span>
            <span>电信 | 贵州省贵阳市</span>
          </p>

        </div>
      </div>
      </div>

    <van-empty
      style="margin-top: 50px"
      :image="emptyImage"
      v-if="showEmpty"
      description="搜索无结果" />
    </div>
    <div style="height: 100px"></div>

  </frame-view>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      activeName: 'a',
      activeName2: 'a',
      activeClick: '',
      switch1: false,
      switch2: false,
      value1: 0,
      option1: [
        { text: '默认排序', value: 0 },
        { text: '按照收益最高', value: 1 },
        { text: '按照收益最低', value: 2 },
        { text: '按照流量最高', value: 3 },
        { text: '按照流量最低', value: 4 }
      ],
      value2: '成员',
      option2: [
        { text: '成员', value: 0 },
        { text: '1号分组', value: 1 },
        { text: '2号分组', value: 2 }
      ],
      value3: 0,
      option3: [
        { text: '默认分组', value: 0 },
        { text: '1号分组', value: 1 },
        { text: '2号分组', value: 2 }
      ],
      value4: 0,
      option4: [
        { text: '运营商', value: 0 },
        { text: '电信', value: 1 },
        { text: '移动', value: 2 },
        { text: '联通', value: 2 }
      ],
      addValue: '',
      emptyImage:require('../index/image/empty.png'),
      showEmpty: false,
      // env:process.env
    };
  },
  methods: {
    goPage(url) {
      this.$router.push(url);
    }
  }
};
</script>

<style scoped lang="scss">

.title {
  width: 192px;
  height: 48px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 48px;
  color: #FFFFFF;
  line-height: 48px;
  text-align: left;
  font-style: normal;
  margin-top: 20px;
}

.index {
  background-image: url('./image/位图@2x.png');
  background-size: 100% 50%;
  background-repeat: no-repeat;
  display: flex;
  font-size: 28px;
}


.indexTwo {
  background-size: 100% 50%;
  background: linear-gradient(180deg, #1A9988 0%, #F7F7F7 30%) no-repeat;
  display: flex;
  font-size: 28px;
}

.type {
  display: flex;
  justify-content: space-between;
  align-items: end;

  :deep(.van-tab--active) {
    font-size: 36px;
  }
}

.status {
  margin-left: 12px;
  display: inline-block;
  background-color: #14C263;
  border-radius: 4px;
  height: 32px;
  line-height: 32px;
  color: #fff;
  font-size: 22px;
  width: 78px;
  text-align: center;

  &.nati {
    background-color: #5490ff;
  }

  &.leave {
    background-color: #ff4a00;
  }

  &.await {
    background-color: #ebedf0;
    color: #000;
  }

}

#iconDown {
  transition: all 0.3s;
  margin-left: 2px;
  width: 20px;
  height: 20px;
  opacity: 0.3;
  transform: rotate(180deg);
}

.activeClick {
  transform: rotate(0deg);
  opacity: 1;
}

:deep(.van-dropdown-menu__bar) {
  background-color: rgba(0, 0, 0, 0) !important;
  box-shadow: none !important;
}

:deep(.van-popup--top) {
  left: 20px !important;
  width: 710px !important;
  background-color: #f7f7f7 !important;
  //下面圆滑
  border-radius: 0 0 20px 20px !important;

  .van-dropdown-item__option {
    background-color: #f7f7f7 !important;

  }

  .van-dropdown-item__option--active {
    color: #000 !important;
    font-weight: bold;
  }
}

:deep(.van-cell__title) {
  color: #5D5D5D !important;
}

:deep(.van-dropdown-item__icon) {
  color: var(--primary-color) !important;
}

.addGroup {
  display: flex;
  justify-content: space-between;
  font-size: 28px;
  align-items: center;
  padding: 10px 32px;

  :deep(.van-field__control) {
    font-size: 22px;
  }

}

//van-search__content  输入时的颜色
:deep(.van-search__content:focus-within) {
  border: 1px solid var(--primary-color);
  //光标颜色
  caret-color: var(--primary-color);
}
.typeTop{
  :deep(.van-tabs__line){
    top: 46px !important;
  }
}
</style>
